<template>
	<Layout :class="'bg-white p-2'">
		<Row class="p-1">
			<Col class="p-1" span="4">
				<Input class="w-100" v-model="searchKey.customerName" placeholder="请输入顾客名" />
			</Col>
			<Col class="p-1" span="4">
				<Input class="w-100" v-model="searchKey.customerTelephone" placeholder="请输入顾客电话号" />
			</Col>
			<Col class="p-1" span="4">
				<Input class="w-100" v-model="searchKey.customerCarNo" placeholder="请输入顾客车牌号" />
			</Col>
			<Col class="p-1" span="4">
				<Input class="w-100" v-model="searchKey.customerFrameNo" placeholder="请输入顾客车架号" />
			</Col>
		</Row>	
		<Row class="p-1">	
			<Col class="p-1" span="4">
				<Input class="w-100" v-model="searchKey.batchNo" placeholder="请输入订单号" />
			</Col>
			<Col class="p-1" span="4">
				<Select v-model="searchKey.state" class="w-100">
					<Option v-for="item in state"  :value="item.value" >{{ item.label }}</Option>
				</Select>
			</Col>
			<Col class="p-1" span="4">
				<Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetime" 
					@on-change="startDateChange" placeholder="选择开始时间"></Date-picker>
			</Col>
			<Col class="p-1" span="4">
				<Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetime" 
					@on-change="endDateChange" placeholder="选择结束时间"></Date-picker>
			</Col>
		</Row>
		
		<Row class="p-1">
			<Button class="m-1 float-right" type="primary" @click="search">查询</Button>
			<Button class="m-1 float-left" type="error" @click="newFlow">新增</Button>
		</Row>
		
		<Layout :class="'bg-white'">
			<Table border :class="'m-2'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="state" >
					{{showState(row.state)}}
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button size="small" style="margin-right: 5px" 
						@click="switchPage(row.saleId)" type="primary" >详细</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data: function() {
			return {
				searchKey: {					
					saleId:"",
					customerName:"",
					customerTelephone:"",
					customerFrameNo:"",
					ustomerCarNo:"",
					userId:"",
					storeId:"",
					startDate:"",
					endDate:"",
					batchNo:"",
					salesperson:"",
					state:""
				},
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "订单号",
							align: 'center',
							key: "batchNo",
							width: 100
						},
						{
							title: "顾客姓名",
							align: 'center',
							key: "customerName",
							width: 150
						},
						{
							title: "顾客电话号",
							align: 'center',
							key: "customerTelephone",
							width: 150
						},
						{
							title: "顾客车架号",
							align: 'center',
							key: "customerFrameNo",
							width: 150
						},						
						{
							title: "顾客车牌号",
							align: 'center',
							key: "customerCarNo",
							width: 150
						},
						{
							title: "订单时间",
							align: 'center',
							key: "date",
							width: 200
						},
						{
							title: "销售员",
							align: 'center',
							key: "salesperson",
							width: 120
						},
						{
							title: "订单状态",
							align: 'center',
							slot: "state",
							width: 120
						},
						{
							title: "操作",
							align: 'center',
							slot: 'action'
						}
					],
					state1: '',
					data: []
				},                
				state: [
                    {
                        value: "1",
                        label: '已下单'
                    },
                    {
                        value: "2",
                        label: '已出库'
                    },
                    {
                        value: "3",
                        label: '施工中'
                    },
                    {
                        value: "4",
                        label: '施工完成'
                    },
                    {
                        value: "5",
                        label: '已交付'
                    },
                    {
                        value: "6",
                        label: '已取消'
                    }
                ],
			};
		},
		created: function() {
			this.search();
		},
		methods: {
			search: function() {
				this.searchKey.current = 1;
				this.loadData();
			},
			showState: function(rowState) {
				for (var i = 0; i < this.state.length; i++) {
					if (this.state[i].value == rowState) {
						return this.state[i].label;						
					}
				}
				
			},
			startDateChange: function(s) {
				this.searchKey.startDate = s;
			},
			endDateChange: function(e) {
				this.searchKey.endDate = e;
			},
			loadData: function() {
				this.http.get({
					url: "/sale_order_header/page",
					param: this.searchKey
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.searchKey.current = changedPage;
				this.loadData();
			},
			switchPage: function(saleId) {
				this.$router.push({
					path: "detail?saleId=" + saleId,
				});
			},
			newFlow: function() {
				this.$router.push({
					path: "sale_order/new",
				});
			},
		}
	}
</script>

<style>
</style>
